<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="handleSelect"
        >
          <el-menu-item index="1">当前登录用户{{Store.UserInfo.UserName}}（角色：{{Store.UserInfo.RoleName}}，昵称：{{Store.UserInfo.NickName}}）</el-menu-item>
          <el-sub-menu index="2">
            <template #title>用户信息</template>
            <el-menu-item index="2-1">
              <RouterLink to="/insertUser">用户添加</RouterLink>
            </el-menu-item>
            <el-menu-item index="2-2">
              <router-link to="/showUser">用户展示</router-link>
            </el-menu-item>
            <el-menu-item index="2-3">item three</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>角色信息</template>
            <el-menu-item index="3-1">
              <RouterLink to="/insertRole">角色添加</RouterLink>
            </el-menu-item>
            <el-menu-item index="3-2">
              <router-link to="/showRole">角色展示</router-link>
            </el-menu-item>
            <el-menu-item index="3-3">item three</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>权限信息</template>
            <el-menu-item index="4-1">
              <RouterLink to="/insertPermission">权限添加</RouterLink>
            </el-menu-item>
            <el-menu-item index="4-2">
              <router-link to="/showPermission">权限展示</router-link>
            </el-menu-item>
            <el-menu-item index="4-3">item three</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="5" @click="GoLogin()">退出登录</el-menu-item>
          </el-menu>
        </el-header>
      <el-main>
        <RouterView />
      </el-main>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { useCounterStore } from '@/stores/counter'
import { ro } from 'element-plus/es/locales.mjs';

const Store=useCounterStore();

const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const GoLogin=()=>{
 location.href="/"
 Store.UserInfo.UserId=0
 Store.UserInfo.UserName=""
 Store.UserInfo.NickName=""
 Store.UserInfo.Token=""
 Store.UserInfo.RoleId=0
 Store.UserInfo.RoleName="" 
}
</script>
